<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Sortable List(可排序列表)</title>
<!-- KUI -->
<link rel="stylesheet" href="../../../style/kelat.css" media="all"/>
<!-- 扩展样式 -->
<link rel="stylesheet" href="../../../style/theme.css" media="all"/>
<style>
.ColorPalette{height:35px;
line-height:35px;
text-align:center;}
.GridShow .Row{margin-bottom:10px;}
.GridShow [class^=Col]{line-height:20px;padding:5px;margin-bottom:5px}
</style>
</head>
<body >
<div>
   <div class="HelpBox" id="WrapperArea">
   
	<h2>$$.initSortable()</h2>
		<h3>概述</h3>
		<div class="desc">
		<p>可排序列表是列表的扩展，可以对列表进行排序。</p>
	</div>
	<div class="example">
        <h4>可排序列表元素的布局结构</h4>
		<pre><code>&lt;div class="ListBlock Sortable">
    &lt;li>
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">...&lt;/div>
            &lt;div class="ItemInner">...&lt;/div>
        &lt;/div>
        &lt;!-- 可排序句柄元素 -->
        &lt;div class="SortableHandler">&lt;/div>
    &lt;/li>
&lt;/div></code></pre>
		<ul class="List">
			<li>SortableHandler  可拖拽元素（"draggable" element）（默认隐藏），允许你通过它来调整列表顺序。</li>
		</ul>
		<h4>通过HTML标签控制</h4>
		<ul class="List">
			<li>将"OpenSortable"类加入到任意HTML元素中（推荐链接元素），点击该元素实现开启排序功能。</li>
			<li>将"CloseSortable"类加入到任意HTML元素中（推荐链接元素），点击该元素实现关闭排序功能。</li>
			<li>将"ToggleSortable"类加入到任意HTML元素中（推荐链接元素），点击该元素实现切换（开启／关闭）排序功能</li>
			<li>如果在应用中有多个可排序列表，你需要在以上元素中加入data-sortable=".Sortable"属性，以CSS选择器对应相应的可排序列表</li>
		</ul>

	<h4>可排序列表API</h4>
	<p>$$.sortableOpen(sortableContainer) - 在指定的可排序列表开启排序功能</p>
	<ul class="List">
		<li>sortableContainer - 可排序列表的HTML元素或CSS选择器，可选的。如果没有指定，默认将第一个&lt;div class="ListBlock Sortable">元素作为该方法目标。</li>
	</ul>
	<p>$$.sortableClose(sortableContainer) - 在指定的可排序列表关闭排序功能</p>
	<ul class="List">
		<li>sortableContainer - 可排序列表的HTML元素或CSS选择器，可选的。如果没有指定，默认将第一个&lt;div class="ListBlock Sortable">元素作为该方法目标。</li>
	</ul>
	<p>$$.sortableToggle(sortableContainer) - 在指定的可排序列表切换（开启／关闭）排序功能</p>
	<ul class="List">
		<li>sortableContainer - 可排序列表的HTML元素或CSS选择器，可选的。如果没有指定，默认将第一个&lt;div class="ListBlock Sortable">元素作为该方法目标。</li>
	</ul>
	<h4>可排序列表事件</h4>
	<table class="Table TableBor TableHover">

			<thead>
				<tr>
					<th>事件名称</th>
					<th>Target</th>
					<th>描述</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>open</td>
					<td>可排序列表
&lt;div class="ListBlock Sortable"></td>
					<td>当开启排序功能时触发</td>
				</tr>
				<tr>
					<td>close</td>
					<td>可排序列表
&lt;div class="ListBlock Sortable"></td>
					<td>当关闭排序功能时触发</td>
				</tr>
				<tr>
					<td>sort</td>
					<td>列表项目
&lt;li></td>
					<td>当用户释放正在排序的列表项目（&lt;li>）且该项目的顺序改变时触发</td>
				</tr>
			</tbody>
		</table>



		

	
	
	
	
   </div>

</div>

</div>
</body>
</html>
